<template>
  <div>
    <h5>此功能仅供admin用户使用，可对在途流程进行管理</h5>
    <el-row>
      <el-table stripe header-cell-class-name="bindonce" :data="tableData.data" element-loading-text="列表正在加载中" border
        fit highlight-current-row>
        <el-table-column align="center" type="selection" width="55px"></el-table-column>
        <el-table-column align="center" label="主题" width="250" sortable prop="theme">
        </el-table-column>
        <el-table-column align="center" label="环节" width="150" sortable prop="taskName">
        </el-table-column>
        <el-table-column align="center" label="委派人" width="150" sortable prop="owner">
        </el-table-column>
        <el-table-column align="center" label="办理人" width="150" sortable prop="assignee">
        </el-table-column>
        <el-table-column align="center" label="时间" width="180" sortable prop="startTime" :formatter="formatDate">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="130" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showAssignTask(scope.row)">指派</el-button>
            <el-button type="text" size="mini" @click="handleTerminateTask(scope.row)">终止</el-button>
            <el-button type="text" size="mini" @click="handlePauseTask(scope.row)">挂起</el-button>
            <el-button type="text" size="mini" @click="showDetail(scope.row)">详情</el-button>
            <el-button type="text" size="mini" @click="showHistory(scope.row)">历史</el-button>
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align:right;">
        <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageStartChange"
          :current-page="tableData.start" :page-sizes="[10, 20, 30, 40]" :page-size="tableData.limit"
          layout="total, sizes, prev, next, jumper" :total="tableData.total"></el-pagination>
      </p>
    </el-row>
    <el-dialog title="任务指派" :visible="dialogAssignVisible" @close="dialogAssignVisible=false">
      <el-form>
        <el-row>
          <el-col :span="12">
            <el-form-item label="指派方式">
              <el-select v-model="assign.mode" @change="assign.user=null">
                <el-option value="1" label="任意用户"></el-option>
                <el-option value="2" label="任务候选人"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="候选人">
              <el-select v-model="assign.user">
                <template v-if="assign.mode=='1'">
                  <el-option v-for="(value, index) in global.userList" v-if="value != assign.username" :label="value" :value="value"></el-option>
                </template>
                <template v-else>
                  <el-option v-for="(value, index) in assign.userList" v-if="value != assign.username" :label="value" :value="value"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAssignVisible=false">取 消</el-button>
        <el-button type="primary" @click="handleAssignTask()">指派</el-button>
      </div>
    </el-dialog>
    <history :processInstanceId="processInstanceId" :visible="dialogHistoryVisible" :restorable="true"
      @onClose="dialogHistoryVisible = false"></history>
    <detail :processInstanceId="processInstanceId" :visible="dialogDetailVisible"
      @onClose="dialogDetailVisible = false"></detail>
  </div>
</template>

<script>
  import vueJsonEditor from 'vue-json-editor'
  import access from '../api/access.js'
  import history from '../components/history.vue'
  import detail from '../components/detail.vue'
  import global from '../global.js'

  export default {
    data() {
      return {
        global: global,
        dialogAssignVisible: false,
        dialogHandleVisible: false,
        dialogHistoryVisible: false,
        dialogDetailVisible: false,
        tableData: {
          start: 1,
          limit: 10,
          total: 0,
          data: []
        },
        task: {
          id: null,
          taskName: null,
          flowKey: null,
          processInstanceId: null,
          name: null,
          variables: null
        },
        assign: {
          mode: '1',
          user: null,
          username: null,
          taskId: null,
          userList: []
        },
        processInstanceId: null,
        content: null
      }
    },
    components: {
      vueJsonEditor,
      history,
      detail
    },
    mounted: function() {
      this.loadTableData()
    },
    methods: {
      formatDate(row, column) {
        let data = row[column.property]
        if (data == null) {
          return null
        }
        let dt = new Date(data)
        return dt.format('yyyy-MM-dd HH:mm:ss')
      },
      loadTableData: function() {
        access.listRunning(this.tableData.start, this.tableData.limit).then(res => {
          this.tableData.data = res.data || []
          this.tableData.total = res.total || 0
        })
      },
      handlePageSizeChange(value) {
        this.tableData.limit = value
        this.loadTableData()
      },
      handlePageStartChange(value) {
        this.tableData.start = value
        this.loadTableData()
      },
      showAssignTask(row) {
        access.listCandidate(row.id).then(res => {
          this.assign.userList = res.data
        }, res => {
          this.$message.error('获取任务候选人失败')
        })

        this.assign.mode = '1'
        this.assign.taskId = row.id
        this.assign.username = row.assignee
        this.dialogAssignVisible = true
      },
      handleAssignTask() {
        access.assignTask(this.assign.taskId, this.assign.user).then(res => {
          if (!res.success) {
            this.$message.error(res.message || '指派失败')
          } else {
            this.$message.success('指派成功')
            this.loadTableData()
            this.dialogAssignVisible = false
          }
        })
      },
      handleTerminateTask(row) {
        this.$prompt('终止原因', '提示').then(opt => {
          if (!opt.value) {
            return this.$message.success('未填写终止原因，取消终止')
          }
          access.terminateFlow(row.processInstanceId, opt.value).then(res => {
            if (!res.success) {
              this.$message.error(res.message || '终止失败')
            } else {
              this.$message.success('终止成功')
              this.loadTableData()
            }
          })
        }, btn => {})
      },
      handlePauseTask(row) {
        this.$confirm('流程挂起后，改任务将无法执行，确定挂起？', '提示').then(opt => {
          access.pauseFlow(row.processInstanceId).then(res => {
            if (!res.success) {
              this.$message.error(res.message || '挂起失败')
            } else {
              this.$message.success('挂起成功')
              this.loadTableData()
            }
          })
        }, btn => {})
      },
      showDetail(row) {
        this.processInstanceId = row.processInstanceId
        this.dialogDetailVisible = true
      },
      showHistory(row) {
        this.processInstanceId = row.processInstanceId
        this.dialogHistoryVisible = true
      }
    }
  }
</script>

<style>
  .jsoneditor-vue .jsoneditor {
    min-height: 200px;
  }
</style>
